<form method="post">
    <div style="margin: 10px 20px 30px 0px">
        {#  csrf_token的本质作用就是混淆发送给后端的参数#}
        {{form.csrf_token}}
    主机名：{{form.tag_id}}
   网卡：<select id="NetworkName" onchange="networkSelected()">
    <option value = "请选择网络" selected="selected">请选择网络</option>
    </select>

</div>
</form>

    <script>
    var host;
    function selected() {
    var obj = document.getElementById("tag_id"); //定位id
    var index = obj.selectedIndex; // 选中索引
    host = obj.options[index].text; // 选中文本
    var value = obj.options[index].value; // 选中值
    var objSelected = document.getElementById("NetworkName");
    var str=value.split(","); //字符分割1q
     objSelected.options.length=0;
     objSelected.innerHTML= '<option value = "请选择网络" selected="selected">'+"请选择网络"+"</option>"
    for (i=0;i<str.length ;i++ )
    {
        objSelected.innerHTML += "<option value="+str[i]+">"+str[i]+"</option>";
    }
}
    function networkSelected() {
    var obj = document.getElementById("NetworkName"); //定位id
    var index = obj.selectedIndex; // 选中索引
    var text =  obj.options[index].text; // 选中文本
    var value = obj.options[index].value; // 选中值
    //document.getElementById("NetSelected").value=text;
    //window.alert(text)
    document.cookie="network="+text
    document.cookie="host="+host
    network(host,text)
}
    </script>

<div id="container" style="min-width:400px;height:400px"></div>
 <script>
  function network(host,network) {
      $(function () {

          Highcharts.setOptions({
              global: {
                  useUTC: true
              }
          });
          $.getJSON('/network', function (data) {
              var input = data.input
              var output = data.output
              var data1 = new Array();
              var data2 = new Array();
              var data3=  new Array();
              var data4=  new Array();
              for (var i = 0; i < input.length; i++) {
                      data1.push(input[i])
                      data2.push(output[i])
                      data3.push(input[i][1])
                      data4.push(output[i][1])
              }

                //最新
                document.getElementById("last1").innerText=data1[data1.length - 1][1].toFixed(2)
                document.getElementById("last2").innerText=data2[data2.length - 1][1].toFixed(2)
                //最小
                document.getElementById("min1").innerText=Math.min.apply(null, data3).toFixed(2)
                document.getElementById("min2").innerText=Math.min.apply(null, data4).toFixed(2)
                //最大
                document.getElementById("max1").innerText=Math.max.apply(null, data3).toFixed(2)
                document.getElementById("max2").innerText=Math.max.apply(null, data4).toFixed(2)
                //平均
                document.getElementById("avg1").innerText=average(data1).toFixed(2)
                document.getElementById("avg2").innerText=average(data2).toFixed(2)
                 document.getElementById("info").style.display='';
              $('#container').highcharts('StockChart', {
                          legend: {
                              enabled: true,
                              layout: 'vertical',
                              align: 'left',
                              verticalAlign: 'middle',
                              backgroundColor: '#000000',
                              borderColor: 'black',
                              borderWidth: 2,
                              shadow: true
                          },
                          rangeSelector: {
                              buttons: [{
                                  count: 5,
                                  type: 'minute',
                                  text: '5分钟'
                              }, {
                                  count: 1,
                                  type: 'hour',
                                  text: '1小时'
                              }, {
                                  count: 2,
                                  type: 'hour',
                                  text: '2小时'
                              },{
                                  count: 1,
                                  type: 'day',
                                  text: '1天'
                              },{
                                  count: 2,
                                  type: 'day',
                                  text: '2天'
                              }, {
                                  type: 'all',
                                  text: 'All'
                              }],
                              inputEnabled: true,
                              selected: 2
                          },

                          title: {
                              text: '网络实时监控 kb/s'
                          },
                          subtitle: {
                             text: host+'/'+network,
                            style:{
                                 color:'#00CED1'
                             }
                          },
                          xAxis: {
                              title: {
                                  text: 'time'
                              },
                              type: 'datetime',
                              tickPixelInterval: 50
                          },

                          yAxis: [{
                              title: {
                                  text: ''
                              },
                              plotLines: [{
                                  value: 0,
                                  width: 1,
                                  color: '#808080'
                              }]
                          }],

                          exporting: {
                              enabled: true
                          },

                          series: [{
                              name: 'input',
                              type: 'spline',
                              data: data1
                          }, {
                              name: 'output',
                              type: 'spline',
                              data: data2
                          }]
                      }
              );
          });
      })
      function setSize(width) {
          chart.setSize(width, 300);
      }
  }
</script>

<div style="min-width:400px;height:400px;top: 280px;display: none;font-family: Verdana,Arial,sans-serif;font-size: 11px;color: #333333;border-width: 1px" id="info" >
<table width="400" >
  <tr>
    <th align="left"></th>
    <th>最新(kb/s)</th>
    <th>最小(kb/s)</th>
    <th>平均(kb/s)</th>
    <th>最大(kb/s)</th>
  </tr>
  <tr>
    <td width="80" style="border-right-style:none;" >input:</td>
    <td width="60" style="border-right-style:none" id="last1"></td>
    <td width="60" style="border-right-style:none" id="min1"></td>
    <td width="60" style="border-right-style:none" id="avg1"></td>
    <td width="60" style="border-right-style:none" id="max1"></td>
  </tr>
    <tr>
    <td width="80" style="border-right-style:none">output:</td>
    <td width="60" style="border-right-style:none" id="last2"></td>
    <td width="60" style="border-right-style:none" id="min2"></td>
    <td width="60" style="border-right-style:none" id="avg2"></td>
    <td width="60" style="border-right-style:none" id="max2"></td>
  </tr>
</table>
</div>

</body>
</html>